/* 665.CSS
* This will change the layout of the page based on the browser size.
* It is currently styled for any window less than 1250px in width
* and will set the new layout to be a max-width of 665px.
* This should be sufficient for most monitors. 

* Functionality for smaller screens is easily extendible.
* Recreate this document and name it appropriately.
* Change the JQuery in the SampleJS.js file to swap in the new CSS
* file when the browser width is <= the predetermined size.
* This functionality is in the adjustStyle(width) function.


/* Contains the edit information in the middle of the container
 * This should replace the normal right-handed side content window.
 */

div#reducedResolution {
    background-color: #FFFFFF;
    display: block;
    margin-bottom: 75px;
    padding: 0 10px;
    width: 625px;
}

/* Hide the right hand window
 */
div#sticker {
    display: none;
}


/* Arbitrarily set the max width to 665 -- this is the size of the banner.
 We can make this smaller if we make a smaller banner. Is it necessary? */
div#container {
    border-top: none;
    margin-bottom: 100px;
    width: 665px;
} 

/* more or less the same, only less padding and width */
div#mainContent {
    background-color: #fff;
    border: 1px solid #DFDFDF;
    float: left;
    padding: 20px;
    width: 625px;
} 

/* more or less the same, only less padding and width */
div#mainContentNoSidebar {
    background-color: #fff;
    border: 1px solid #DFDFDF;
    border-top: none;
    margin-bottom: 100px;
    padding: 20px;
    width: 625px;
} 

input.reducedInput, select {
    display: inline;
    margin-left: 10px;
    width: 60%;
}

